import React, { Component } from 'react'
import { View, Image, Text, TouchableOpacity } from 'react-native'
import PropTypes from 'prop-types'
import { Grid, Button, Modal } from 'antd-mobile'
import color from '../../libs/color'
import { setProductDict, getOrganNo } from '../../libs/Libs'
import HTTP from '../../libs/HTTP'
import { judgeIsDealerUrl } from '../../libs/api'

const entryImg = require('../../img/Home/entry.png')
const outboundImg = require('../../img/Home/outbound.png')
const returnedImg = require('../../img/Home/returned.png')
const baseinfoImg = require('../../img/Home/baseinfo.png')
const userinfoImg = require('../../img/Home/useinfo.png')
const sideMenuImg = require('../../img/Normal/sidemenu.png')


const alert = Modal.alert


const data = [{
  icon: entryImg,
  text: '进货记录',
  route: 'EntryStack'
}, {
  icon: outboundImg,
  text: '出货记录',
  route: 'OutBoundStack'
}, {
  icon: returnedImg,
  text: '退货记录',
  route: 'ReturnedStack'
}, {
  icon: baseinfoImg,
  text: '货物查询',
  route: 'MaterialsSearch'
}, {
  icon: userinfoImg,
  text: '使用说明',
  route: 'UseInfo'
}]

const otherData = [{
  icon: baseinfoImg,
  text: '货物查询',
  route: 'MaterialsSearch'
}]

const menuStyle = {
  grid: {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
  }
}

class Menu extends Component {
  static propTypes = {
    data: PropTypes.any
  }
  render() {
    return (
      <View>
        <Grid data={this.props.data}
          renderItem={dataItem => (
            <TouchableOpacity onPress={() => this.invokeGrid(dataItem)}　style={menuStyle.grid}>
                <Image source={dataItem.icon} style={{width: 30, height: 30}}/>
                <Text style={{fontSize: 12, color: '#000000', fontWeight: 'normal', marginTop: 10}}>{dataItem.text}</Text>
            </TouchableOpacity>
          )}
        />
      </View>
    )
  }
  invokeGrid = (dataItem) => {
    this.props.navigation.navigate(dataItem.route)
  }

}
export default class extends Component {

  static navigationOptions = ({ navigation }) => ({
    title: '首页',
    headerStyle:{ backgroundColor: color.theme},
    headerTitleStyle:{ color: 'white', fontSize: 20 },
    headerRight: (
      <TouchableOpacity style={styles.headerRight} onPress={() =>{ navigation.navigate('DrawerOpen'); }}>
        <Image source={sideMenuImg} style={{marginHorizontal: 10,width: 25, height: 25, marginTop: 3}}></Image>
      </TouchableOpacity>
    )
  })

  constructor(props) {
    super(props)
    this.state = {
      scanVisible: false,
      scanValue: '',
      data: []
    }
  }
  componentDidMount() {
    HTTP.post(judgeIsDealerUrl(), {organNo: getOrganNo()}, () => {}, (res) => {
      if(res == true) {
        this.setState({
          data: data
        })
      } else {
        this.setState({
          data: otherData
        })
      }
    })
    this.initData()
  }

  initData() {
    // setProductDict({
    //   organNo: getOrganNo()
    // })
  }

  render() {
    console.log('render main')
    return (
      <View>
        <Menu data={this.state.data} {...this.props}/>
      </View>
    )
  }
}

const styles = {
  headerRight: {
    flexDirection: 'row'
  }
}
